import classNames from "classnames";
import React from "react";
import "./index.scss";
import leftIcon from "../../assets/left-icon.png";
import Taro from "@tarojs/taro";

interface Props {
  left?: React.ReactNode;
  center?: React.ReactNode;
  right?: React.ReactNode;
  className?: string;
  fixed?: boolean;
}
export const NavBar = ({ className, left, center, right, fixed }: Props) => {
  return (
    <>
      <div
        className={classNames("nav-bar", className, {
          fixed: fixed,
        })}
      >
        <div
          className="left"
          onClick={() => {
            Taro.navigateBack();
          }}
        >
          {left || <span className="iconfont icon-left-line"></span>}
        </div>
        <div className="center ellipsis">{center}</div>
        <div className="right">{right}</div>
      </div>
      {fixed && <div className="nav-bar-placeholder"></div>}
    </>
  );
};
